import style from "./index.module.scss";
import login_desc from "./assets/login_desc.png";
import { Button, Form, type FormProps, Input, Space, Image } from "antd";
import { useState, useEffect } from "react";
import { Login as login_de } from "@/api/login";
import { useNavigate } from "react-router-dom";
import { useDispatch } from "react-redux";
import { setToken } from "@/store/slice/info";
import { getUUID } from "@/util";
type FieldType = {
  username: string;
  password: string;
  uuid: string;
  captcha: string;
  isMember: number;
};
function Login() {
  // 路由
  const navigate = useNavigate();
  // 调用redux
  const dispatch = useDispatch();
  //定义值
  const [dataValue, setDataValue] = useState({
    uuid: "",
    src: "",
  });

  // 初始化----init 
  useEffect(() => {
    getCode();
  }, []);
  // 表单提交
  // const onFinish: FormProps["onFinish"] = (values) => {
  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    login_de({ ...values, ...dataValue, isMember: 0 }).then((res) => {
      dispatch(setToken(res.data.token));
      navigate("/home");
    });
  };
  // 验证不通过
  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };
  // 获取验证码
  const getCode = () => {
    let uid = getUUID();
    setDataValue({
      uuid: uid,
      src: `/api/captcha?uuid=${uid}`,
    });
  };
  return (
    <div className={style.page_container}>
      <div className={style.login_container}>
        <div className={style.login_left}>
          <div className={style.left_title}>
            <img src={login_desc} alt="" />
          </div>
        </div>
        <div className={style.login_right}>
          <Form
            name="basic"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
            style={{ maxWidth: 600 }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
          >
            <Form.Item<FieldType>
              name="username"
              rules={[{ required: true, message: "请输入用户名" }]}
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item<FieldType>
              name="password"
              rules={[{ required: true, message: "请输入密码" }]}
            >
              <Input.Password placeholder="请输入密码" />
            </Form.Item>
            <Form.Item<FieldType>
              name="captcha"
              rules={[{ required: true, message: "请输入验证码" }]}
            >
              <Space direction="horizontal">
                <Input placeholder="请输入验证码" />
                <Image
                  width={120}
                  height={40}
                  preview={false}
                  src={dataValue.src}
                  onClick={getCode}
                />
              </Space>
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default Login;
